{include file="default/pc/public/mall_header"}
<style>
    .kt-menu__submenu.kt-menu__submenu--classic.kt-menu__submenu--left {
        height: 300px;
        overflow: auto;
        overflow-y: auto;
    }

    .kt-portlet .kt-portlet__body { padding: 25px 25px 15px 25px; }

    img#thumb-view { height: 275px; width: 375px; }
    img.img-responsive.details-thumb-img { width: 50px; height: 50px; }
    .box-detail-thumbs {width: 355px; height: 54px; padding-left: 25px;}
    .small_img {margin-right: 10px; float: left; padding: 2px; background-color: #fff; border: 1px solid #ddd; }
    .small_img img{ width: 100%; height:100%; }

    .form-group { margin-bottom: 0.2rem;}

    .kt-grid-nav .kt-grid-nav__row .kt-grid-nav__item { padding:0 0 1rem 0; }
    img.category_img { width: 85px; height: 65px; margin: 10px 10px 0 10px; }

    .kt-grid-nav .kt-grid-nav__row .kt-grid-nav__item.sort{ padding: 1rem 0 1rem 0; }
    img.price_sort { width: 220px; height: 150px; }
</style>

<div class="kt-container  {$theme_layout_class}  kt-grid__item kt-grid__item--fluid">

    <div class="row">
        <div class="col-md-9">
            <div class="kt-portlet ">
                <div class="kt-portlet__body">
                    <div class="row">
                        <div class="col-md-5 thumb-view-area padding-none">
                            <img src="{$info.cover_id ? get_cover($info.cover_id) : '__STATIC__/images/shop/slider/1.jpg'}" id="thumb-view" class="img-responsive img-thumbnail radius-none" width="100%" style="border: 1px solid #eee;">
                            <div class="box-detail-thumbs kt-margin-t-10">
                                {notempty name="$info.cover_ids"}
                                {volist name="$info.cover_ids" id="image"}
                                    <div class="small_img" style=" ">
                                        <img src="{$image|get_cover}" class="img-responsive details-thumb-img" width="100%">
                                    </div>
                                {/volist}
                                {else/}
                                    <div class="small_img" style=" ">
                                        <img src="{$info.cover_id|get_cover}" class="img-responsive details-thumb-img" width="100%">
                                    </div>
                                {/notempty}

                            </div>
                            <input type="hidden" name="id" value="38">
                        </div>

                        <div class="col-md-7">
                            <div class="kt-portlet">
                                <div class="kt-portlet__head">
                                    <div class="kt-portlet__head-label">
                                        <h3 class="kt-portlet__head-title">
                                            <strong>{$info.title}</strong>
                                        </h3>
                                    </div>
                                </div>

                                <!--begin::Form-->
                                <form class="kt-form kt-form--label-right" id="kt_form_1" novalidate="novalidate" action="" method="post">
                                    <input type="hidden" name="goods" value="1">
                                    <div class="kt-portlet__body">
                                        <div class="form-group row">
                                            <label class="col-form-label col-lg-3 col-sm-12">价格：</label>
                                            <div class="col-lg-4 col-md-9 col-sm-12" style="line-height: 39px;">
                                                <span>{$info.price|intval}积分</span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-lg-3 col-sm-12">评价：</label>
                                            <div class="col-lg-4 col-md-9 col-sm-12" style="line-height: 39px;">
                                                <i class="fa fa-star kt-font-info"></i>
                                                <i class="fa fa-star kt-font-info"></i>
                                                <i class="fa fa-star kt-font-info"></i>
                                                <i class="fa fa-star"></i>
                                                <i class="fa fa-star"></i>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-lg-3 col-sm-12">配送至：</label>
                                            <div class="col-lg-4 col-md-9 col-sm-12">
                                                <div class="dropdown bootstrap-select form-control kt-">
                                                    <select class="form-control kt-selectpicker" data-size="4" tabindex="-98">
                                                        <!--<option>北京</option>-->
                                                    </select>
                                                    <button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="combobox" aria-owns="bs-select-2" aria-haspopup="listbox" aria-expanded="false" title="请选择配送地址！">
                                                        <div class="filter-option">
                                                            <div class="filter-option-inner">
                                                                <div class="filter-option-inner-inner">北京</div>
                                                            </div>
                                                        </div>
                                                    </button>
                                                    <div class="dropdown-menu" x-placement="bottom-start"
                                                         style="max-height: 182px; overflow: hidden; min-width: 150px; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
                                                        <div class="inner show" role="listbox" id="bs-select-2" tabindex="-1" aria-activedescendant="bs-select-2-0" style="max-height: 156px; overflow-y: auto;">
                                                            <ul class="dropdown-menu inner show" role="presentation" style="margin-top: 0px; margin-bottom: 0px;">
                                                                <li class="selected active">
                                                                    <a role="option" class="dropdown-item active selected" id="bs-select-2-0" tabindex="0" aria-setsize="6" aria-posinset="1" aria-selected="true">
                                                                        <span class="text">北京</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a role="option" class="dropdown-item" id="bs-select-2-1" tabindex="0" aria-setsize="6" aria-posinset="2">
                                                                        <span class="text">上海</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a role="option" class="dropdown-item" id="bs-select-2-2" tabindex="0" aria-setsize="6" aria-posinset="3">
                                                                        <span class="text">深圳</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a role="option" class="dropdown-item" id="bs-select-2-3" tabindex="0">
                                                                        <span class="text">河北</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a role="option" class="dropdown-item" id="bs-select-2-4" tabindex="0">
                                                                        <span class="text">河南</span>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a role="option" class="dropdown-item" id="bs-select-2-5" tabindex="0">
                                                                        <span class="text">天津</span>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-lg-3 col-sm-12">选择样式：</label>
                                            <div class="col-lg-4col-9 kt-margin-l-10">
                                                <div class="kt-radio-inline">
                                                    <label class="kt-radio">
                                                        <input type="radio" name="style">黑色
                                                        <span></span>
                                                    </label>
                                                    <label class="kt-radio">
                                                        <input type="radio" name="style">紫色
                                                        <span></span>
                                                    </label>
                                                    <label class="kt-radio">
                                                        <input type="radio" name="style">蓝色
                                                        <span></span>
                                                    </label>
                                                    <label class="kt-radio">
                                                        <input type="radio" name="style">星空灰
                                                        <span></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-form-label col-lg-3 col-sm-12">数量：</label>
                                            <div class="col-lg-4 col-md-9 col-sm-12">
                                                <div class="input-group bootstrap-touchspin bootstrap-touchspin-injected"><span class="input-group-btn input-group-prepend"><button class="btn btn-secondary bootstrap-touchspin-down" type="button">-</button></span><input id="kt_touchspin_3" type="text" class="form-control" value="0" name="demo1" placeholder="Select time"><span class="input-group-btn input-group-append"><button class="btn btn-secondary bootstrap-touchspin-up" type="button">+</button></span></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-9 ml-lg-auto kt-margin-t-15">
                                            <a href="{:url('mall/api.goods/buy',['id'=>$info->id])}" class="btn btn-success ajax-post ajax-get kt-margin-l-20">
                                                <i class="fa fa-dollar-sign"></i>
                                                立即兑换
                                            </a>
                                            <a href="{:url('mall/api.bookmark/add',['id'=>$info->id])}" class="btn btn-primary ajax-post ajax-get kt-margin-l-15">
                                                <i class="fa fa-bookmark"></i>
                                                &nbsp;收&emsp;藏&nbsp;
                                            </a>
                                        </div>
                                    </div>
                                </form>
                                <!--end::Form-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="kt-portlet kt-portlet--height-fluid">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            同类推荐
                        </h3>
                    </div>
                </div>
                <div class="kt-portlet__body kt-padding-0">
                    <!--begin::Section-->
                    <div class="kt-section ">
                        <div class="kt-section__content  kt-section__content--fit">

                            <!--begin: Grid Nav -->
                            <div class="kt-grid-nav kt-grid-nav--skin-light">

                                {notempty name="recommend"}
                                    <div class="kt-grid-nav__row">
                                        {volist name="recommend" id="item" offset='0' length='2' }
                                            <a href="{:url('mall/goods/index',['id'=>$item.id])}" class="kt-grid-nav__item">
                                                <!--<span class="kt-grid-nav__icon   kt-padding-0">-->
                                                <img class="category_img" src="{$item.cover_id ? get_cover($item.cover_id) : '__STATIC__/images/shop/banners/5.jpg'}" alt="">
                                                <!--</span>-->
                                                <span class="kt-grid-nav__desc">积分：<strong class="kt-font-info">{$item.price}</strong></span>
                                            </a>
                                            {/volist}
                                    </div>
                                    <div class="kt-grid-nav__row">
                                        {volist name="recommend" id="item" offset='2' length='2' }
                                            <a href="{:url('mall/goods/index',['id'=>$item.id])}" class="kt-grid-nav__item">
                                                <!--<span class="kt-grid-nav__icon   kt-padding-0">-->
                                                <img class="category_img" src="{$item.cover_id ? get_cover($item.cover_id) : '__STATIC__/images/shop/banners/5.jpg'}" alt="">
                                                <!--</span>-->
                                                <span class="kt-grid-nav__desc">积分：<strong class="kt-font-info">{$item.price}</strong></span>
                                            </a>
                                        {/volist}
                                    </div>
                                    <div class="kt-grid-nav__row">
                                        {volist name="recommend" id="item" offset='4' length='2' }
                                            <a href="{:url('mall/goods/index',['id'=>$item.id])}" class="kt-grid-nav__item">
                                                <!--<span class="kt-grid-nav__icon   kt-padding-0">-->
                                                <img class="category_img" src="{$item.cover_id ? get_cover($item.cover_id) : '__STATIC__/images/shop/banners/5.jpg'}" alt="">
                                                <!--</span>-->
                                                <span class="kt-grid-nav__desc">积分：<strong class="kt-font-info">{$item.price}</strong></span>
                                            </a>
                                        {/volist}
                                    </div>
                                {else/}
                                <span>暂时没有商品可以推荐！</span>
                                {/notempty}
                            </div>

                            <!--end: Grid Nav -->
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <div class="kt-portlet kt-portlet--height-fluid">
                <div class="kt-portlet__head">
                    <div class="kt-portlet__head-label">
                        <h3 class="kt-portlet__head-title">
                            同价位排行榜
                        </h3>
                    </div>
                </div>
                <div class="kt-portlet__body kt-padding-0">

                    <!--begin::Section-->
                    <div class="kt-section">
                        <div class="kt-section__content  kt-section__content--fit">

                            <!--begin: Grid Nav -->
                            <div class="kt-grid-nav kt-grid-nav--skin-light">
                                {notempty name="goods_price_sort"}
                                {volist name="goods_price_sort" id="item" length='4'}
                                    <div class="kt-grid-nav__row">
                                    <a href="{:url('mall/goods/index',['id'=>$item.id])}" class="kt-grid-nav__item sort">
                                        <img class="price_sort" src="{$item.cover_id ? get_cover($item.cover_id) : '__STATIC__/images/shop/banners/7.jpg'}" alt="">
                                        <span class="kt-grid-nav__title kt-font-dark">{$item.title}</span>
                                        <span class="kt-grid-nav__desc">积分：<strong class="kt-font-info">{$item.price}</strong></span>
                                    </a>
                                </div>
                                {/volist}
                                {/notempty}
                            </div>

                            <!--end: Grid Nav -->
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="kt-portlet kt-portlet--height-fluid">
                <div class="kt-portlet__body">
                    <ul class="nav nav-tabs nav-tabs-line nav-tabs-bold nav-tabs-line-3x nav-tabs-line-success" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#service_1" role="tab"> 商品介绍 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#service_2" role="tab"> 规则详情 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#service_3" role="tab"> 礼品评价 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#service_4" role="tab"> 兑换记录 </a>
                        </li>
                    </ul>
                    <div class="tab-content content-hold">
                        <div class="tab-pane active" id="service_1" role="tabpanel">
                            <div class="md-preview" data-provider="markdown-preview">
                                {$info.content|entities_to_html|raw}
                            </div>

                        </div>
                        <div class="tab-pane" id="service_2" role="tabpanel"></div>
                        <div class="tab-pane" id="service_3" role="tabpanel"></div>
                        <div class="tab-pane" id="service_4" role="tabpanel">
                            <div class="table-scrollable">
                                <table class="table table-hover">
                                    {notempty name="goods_order_list"}
                                    <thead>
                                    <tr>
                                        <th> 用户名</th>
                                        <th> 购买时间</th>
                                        <th> 购买数量</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    {volist name="goods_order_list" id="order"}
                                    <tr>
                                        <td> {$order.user.nickname}</td>
                                        <td> {$order.create_time}</td>
                                        <td> {$order.num_buy}</td>
                                    </tr>
                                    {/volist}
                                    {else /}
                                    <span>暂时没有购买记录</span>
                                    {/notempty}

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__STATIC__/v6\theme7/assets/js/pages/crud/forms/widgets/bootstrap-touchspin.js" type="text/javascript"></script>